import React, { Component } from 'react';
import {
    StyleSheet, 
    View,
    Text,
    Image,
    TextInput,
    TouchableOpacity,
    Platform,
} from 'react-native';
import { getPixel, getScreenWidth, getScreenHeight, storeData, getData } from '../common/common';
import BaseComponent from '../component/BaseComponent';
import SplashScreen from 'react-native-splash-screen';
import {Echarts, echarts} from 'react-native-secharts';


var data = [
{
    name: '东四',
    value: 54
},{
    name: '太平湖',
    value: 44
},{
    name: '金盏',
    value: 35
},{
    name: '旧宫',
    value: 30
}]    
  
var seriesArr = [];
var colors=[['#389af4', '#dfeaff'],['#ff8c37', '#dfeaff'],['#ffc257', '#dfeaff'], ['#fd6f97', '#dfeaff'],['#a181fc', '#dfeaff']];
export default class Test extends BaseComponent {

    
    constructor(props){

        super(props);
        this.state = {
            image: '',
            option: {
               
                //series: seriesArr,
            },
            // flag: false  // 这个布尔值是为了测试option1在setstate操作后不会被重置成初始状态。
          }
        this.echart1 = React.createRef();
    }


    componentDidMount() {
        SplashScreen.hide();
        //console.log(1);
        data.forEach(function(item, index){
            seriesArr.push(
                {
                    name: item.name,
                    type: 'pie',
                    clockWise: false,
                    radius: [index * 20 + 10 + 60, index * 20 + 10 + 70],
                    itemStyle:  {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                        }
                    },
                    clockWise: true,
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    data: [{
                        value: item.value,
                        // label: {
                        //     normal: {
                        //         formatter: function(params){
                        //             return params.value+'%';
                        //         },
                        //         position: 'center',
                        //         show: true,
                        //         textStyle: {
                        //             fontSize: '20',
                        //             fontWeight: 'bold',
                        //             color: colors[index][0]
                        //         }
                        //     }
                        // },
                    }, {
                        value: 100-item.value,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: colors[index][1],
                                
                            },
                            emphasis: {
                                color: colors[index][1]
                            }
                        }
                    }]
                }    
            )
        });

        //console.log(seriesArr);
        seriesArr.push(
            {
                type: 'liquidFill',
                // itemStyle: {
                //     normal: {
                //         opacity: 0.4,
                //         shadowBlur: 0,
                //         shadowColor: 'blue'
                //     }
                // },
                // name: '今日完成进度',
                data: [0.8, 0.5, 0.4, 0.3],
                color: ['#389af4','#ff8c37','#ffc257','fd6f97'],
                center: ['50%', '50%'],
                backgroundStyle: {
                    color: '#758DFF'
                },
                label: {
                    normal: {
                        formatter: '',
                        textStyle: {
                            fontSize: 100,
                        }
                    }
                },
                outline: {
                    itemStyle: {
                        borderWidth: 0
                    },
                    borderDistance: 0
                }
            }
        );
        //console.log(seriesArr);
        this.setState({
            option: {
                title: {
                    top: '40%',
                    left: 'center',
                    text: '9890',
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontSize: 40
                    },
                    subtext: '资源资产总数量',
                    subtextStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                series: seriesArr,
            },
          })
    }

    render() {
        return (
            <View style={styles.container}>
                 <View><Echarts ref={this.echart1} option={this.state.option} height={300} /></View>        
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      // alignItems: 'center',
      backgroundColor: "#576CE9",
    }
  });